<template>
  <div class="depPie" ref="depPie"></div>
</template>
<script setup>
import * as echarts from 'echarts';

import { onMounted, ref } from 'vue';

import { getAllPositionsAPI } from '@/api/postManageEch.js';

const depPie = ref(null);
onMounted(() => {
  showFoo();
});

const showFoo = async () => {
  const res = await getAllPositionsAPI();
  var myChart = echarts.init(depPie.value);
  var option;

  option = {
    title: {
      text: '岗位管理',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['薪资', '人数'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: res.data.positions,
      axisLabel: {
        interval: 0,
        rotate: 50,
      },
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '薪资',
        type: 'line',
        stack: 'Total',
        data: res.data.salaries,
      },
      {
        name: '人数',
        type: 'line',
        stack: 'Total',
        data: res.data.peopleList,
      },
    ],
  };

  option && myChart.setOption(option);
};
</script>

<style scoped lang="less">
.depPie {
  width: 100%;
  height: 100%;
}
</style>
